<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算机专业学生简历</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body>
    <div class="container">
        <!-- 头部区域 -->
        <header class="header">
            <div class="profile">
                <h1 class="name">刘静</h1>
                <div class="job-intention">求职意向：前端开发工程师 / 全栈开发工程师</div>
                <h2 class="title">计算机科学与技术专业 · 应届毕业生</h2>
                <div class="contact">
                    <a href="mailto:liujing@example.com" class="contact-item">
                        <i class="fas fa-envelope"></i> liujing@example.com
                    </a>
                    <a href="tel:+8613800138000" class="contact-item">
                        <i class="fas fa-phone"></i> 138-0013-8000
                    </a>
                    <a href="https://github.com/liujing" target="_blank" class="contact-item">
                        <i class="fab fa-github"></i> github.com/liujing
                    </a>
                    <a href="https://www.linkedin.com/in/liujing" target="_blank" class="contact-item">
                        <i class="fab fa-linkedin"></i> LinkedIn
                    </a>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="main">
            <!-- 左侧内容 -->
            <div class="left-column">
                <!-- 个人简介 -->
                <section class="section">
                    <h3 class="section-title">
                        <i class="fas fa-user"></i> 个人简介
                    </h3>
                    <p class="intro">
                        计算机科学与技术专业应届毕业生，GPA 3.7/4.0，专业排名前20%。
                        具备扎实的计算机理论基础和丰富的项目实践经验，精通JavaScript、Vue.js等前端技术，
                        熟悉Node.js和Spring Boot后端开发。具备良好的团队协作能力和问题解决能力，
                        追求代码质量，热衷于学习新技术。在校期间获得多次奖学金，并在知名企业有实习经历。
                    </p>
                    <div class="self-evaluation">
                        <h4 class="evaluation-title">自我评价</h4>
                        <p>积极主动、学习能力强，善于快速掌握新技术并应用到实际项目中。具有良好的沟通能力和团队协作精神，能够在压力下高效工作。注重代码质量和用户体验，始终以产品价值为导向进行开发。</p>
                    </div>
                </section>

                <!-- 技能 -->
                <section class="section">
                    <h3 class="section-title">
                        <i class="fas fa-tools"></i> 技能
                    </h3>
                    <div class="skills">
                        <div class="skill-category">
                            <h4 class="skill-category-title">编程语言</h4>
                            <div class="skill-list">
                                <span class="skill-item">JavaScript <small>★★★★★</small></span>
                                <span class="skill-item">Python <small>★★★★☆</small></span>
                                <span class="skill-item">Java <small>★★★☆☆</small></span>
                                <span class="skill-item">C/C++ <small>★★★☆☆</small></span>
                            </div>
                        </div>
                        <div class="skill-category">
                            <h4 class="skill-category-title">前端技术</h4>
                            <div class="skill-list">
                                <span class="skill-item">HTML5 <small>★★★★★</small></span>
                                <span class="skill-item">CSS3 <small>★★★★★</small></span>
                                <span class="skill-item">Vue <small>★★★★★</small></span>
                                <span class="skill-item">React <small>★★★★☆</small></span>
                                <span class="skill-item">Bootstrap <small>★★★★☆</small></span>
                            </div>
                        </div>
                        <div class="skill-category">
                            <h4 class="skill-category-title">后端技术</h4>
                            <div class="skill-list">
                                <span class="skill-item">Node.js <small>★★★★☆</small></span>
                                <span class="skill-item">Express <small>★★★★☆</small></span>
                                <span class="skill-item">Django <small>★★★☆☆</small></span>
                                <span class="skill-item">Spring Boot <small>★★★☆☆</small></span>
                            </div>
                        </div>
                        <div class="skill-category">
                            <h4 class="skill-category-title">数据库</h4>
                            <div class="skill-list">
                                <span class="skill-item">MySQL <small>★★★★☆</small></span>
                                <span class="skill-item">MongoDB <small>★★★☆☆</small></span>
                                <span class="skill-item">Redis <small>★★★☆☆</small></span>
                            </div>
                        </div>
                        <div class="skill-category">
                            <h4 class="skill-category-title">其他技能</h4>
                            <div class="skill-list">
                                <span class="skill-item">Git <small>★★★★★</small></span>
                                <span class="skill-item">Docker <small>★★★☆☆</small></span>
                                <span class="skill-item">Linux <small>★★★★☆</small></span>
                                <span class="skill-item">RESTful API <small>★★★★☆</small></span>
                                <span class="skill-item">算法设计 <small>★★★★☆</small></span>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 证书 -->
                <section class="section">
                    <h3 class="section-title">
                        <i class="fas fa-certificate"></i> 证书
                    </h3>
                    <div class="certificates">
                        <div class="certificate-item">
                            <span class="certificate-name">计算机二级证书</span>
                            <span class="certificate-date">2022年9月</span>
                        </div>
                        <div class="certificate-item">
                            <span class="certificate-name">英语四级证书</span>
                            <span class="certificate-date">2021年12月</span>
                        </div>
                        <div class="certificate-item">
                            <span class="certificate-name">英语六级证书</span>
                            <span class="certificate-date">2022年6月</span>
                        </div>
                    </div>
                </section>

                <!-- 兴趣爱好 -->
                <section class="section">
                    <h3 class="section-title">
                        <i class="fas fa-heart"></i> 兴趣爱好
                    </h3>
                    <div class="hobbies">
                        <span class="hobby-item">技术博客写作</span>
                        <span class="hobby-item">开源项目贡献</span>
                        <span class="hobby-item">前端技术学习</span>
                        <span class="hobby-item">算法练习</span>
                    </div>
                </section>
            </div>

            <!-- 右侧内容 -->
            <div class="right-column">
                <!-- 教育背景 -->
                <section class="section">
                    <h3 class="section-title">
                        <i class="fas fa-graduation-cap"></i> 教育背景
                    </h3>
                    <div class="education">
                        <div class="education-item">
                            <div class="education-header">
                                <h4 class="education-institution">湖南农业大学</h4>
                                <span class="education-date">2020.09 - 2024.06</span>
                            </div>
                            <p class="education-major">计算机科学与技术专业 | 本科 | 学士学位</p>
                            <p class="education-gpa">GPA: 3.7/4.0 | 专业排名: 前20%</p>
                            <p class="education-courses">主要课程: 数据结构、算法设计、计算机网络、操作系统、数据库原理、软件工程、人工智能等</p>
                        </div>
                    </div>
                </section>

                <!-- 项目经历 -->
                <section class="section">
                    <h3 class="section-title">
                        <i class="fas fa-project-diagram"></i> 项目经历
                    </h3>
                    <div class="projects">
                        <div class="project-item">
                            <div class="project-header">
                                <h4 class="project-title">图书馆管理系统</h4>
                                <span class="project-date">2023.03 - 2023.06</span>
                            </div>
                            <a href="https://github.com/liujing/library-system" target="_blank" class="project-link">
                                <i class="fab fa-github"></i> 项目链接
                            </a>
                            <p class="project-role">前端开发工程师</p>
                            <ul class="project-details">
                                <li>使用Vue.js 3 + Element Plus构建前端页面，实现图书查询、借阅、归还等核心功能</li>
                                <li>采用Vuex进行状态管理，Vue Router实现路由导航，提升用户体验</li>
                                <li>对接RESTful API，实现数据交互和JWT用户认证，确保系统安全性</li>
                                <li>优化前端性能，页面加载速度提升40%，响应时间缩短35%</li>
                                <li>独立解决跨域问题和接口兼容性问题，确保前后端协作顺畅</li>
                                <li>编写详细的开发文档，方便团队协作和后期维护</li>
                            </ul>
                        </div>

                        <div class="project-item">
                            <div class="project-header">
                                <h4 class="project-title">智能图书管理系统</h4>
                                <span class="project-date">2022.09 - 2022.12</span>
                            </div>
                            <p class="project-role">全栈开发工程师</p>
                            <ul class="project-details">
                                <li>作为项目负责人，使用Vue.js + Node.js + Express构建全栈系统，负责系统架构设计和核心功能开发</li>
                                <li>设计并实现MySQL数据库，包含图书、用户、借阅记录等8张核心数据表，优化查询性能</li>
                                <li>独立开发基于协同过滤的图书推荐算法，准确率达75%，提升图书借阅率25%</li>
                                <li>系统在学校图书馆成功试用，服务500+师生，获得图书馆优秀创新项目奖</li>
                            </ul>
                        </div>

                        <div class="project-item">
                            <div class="project-header">
                                <h4 class="project-title">校园社交网络平台</h4>
                                <span class="project-date">2021.10 - 2022.01</span>
                            </div>
                            <p class="project-role">后端开发工程师</p>
                            <ul class="project-details">
                                <li>使用Spring Boot框架搭建后端服务，实现用户注册、登录、发布动态等功能</li>
                                <li>使用Redis缓存热点数据，提升系统性能</li>
                                <li>设计并实现了消息推送功能，支持实时消息通知</li>
                                <li>编写详细的API文档，方便前端开发人员对接</li>
                            </ul>
                        </div>
                    </div>
                </section>

                <!-- 实习经历 -->
                <section class="section">
                    <h3 class="section-title">
                        <i class="fas fa-briefcase"></i> 实习经历
                    </h3>
                    <div class="internships">
                        <div class="internship-item">
                            <div class="internship-header">
                                <h4 class="internship-company">中国银联</h4>
                                <span class="internship-date">2023.07 - 2023.09</span>
                            </div>
                            <p class="internship-position">前端开发实习生</p>
                            <ul class="internship-details">
                                <li>参与银联支付平台前端开发，使用React + Redux构建高可用、高性能的用户界面</li>
                                <li>负责支付流程和用户中心模块的开发，编写高质量代码，代码审核通过率98%</li>
                                <li>优化页面加载性能，通过懒加载、代码分割等技术，首屏加载时间减少30%</li>
                                <li>独立修复10+个关键Bug，用户反馈问题解决率达95%</li>
                                <li>参与每日代码审查，提出20+条有价值的改进建议，被团队采纳率达80%</li>
                            </ul>
                        </div>
                    </div>
                </section>

                <!-- 获奖情况 -->
                <section class="section">
                    <h3 class="section-title">
                        <i class="fas fa-award"></i> 获奖情况
                    </h3>
                    <div class="awards">
                        <div class="award-item">
                            <div class="award-header">
                                <h4 class="award-name">校一等奖学金</h4>
                                <span class="award-date">2022-2023学年</span>
                            </div>
                            <p class="award-desc">专业成绩排名前5%，综合素质优秀</p>
                        </div>
                        <div class="award-item">
                            <div class="award-header">
                                <h4 class="award-name">校二等奖学金</h4>
                                <span class="award-date">2021-2022学年</span>
                            </div>
                            <p class="award-desc">专业成绩排名前10%</p>
                        </div>
                        <div class="award-item">
                            <div class="award-header">
                                <h4 class="award-name">校级优秀学生干部</h4>
                                <span class="award-date">2022年5月</span>
                            </div>
                            <p class="award-desc">担任班级学习委员期间表现突出</p>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <script src="script.js"></script>
</body>

</html>